<template>
  <div>
    <v-layout row wrap>
      <v-flex xs12 md6 lg6 class="pa-1">
        <v-card>
            <div class="pa-2">
              <v-layout>
                <div style="font-size:32px">房价预估</div>
                <v-spacer></v-spacer>
                <v-btn color="success" @click="estimate()" :loading="estimating">开始预估</v-btn>
              </v-layout>
              <v-text-field color="green" id="suggestId" label="地址" v-model="address"></v-text-field>
              <v-layout row wrap>
                <v-radio-group v-model="dianti" :mandatory="false">
                  <v-layout row wrap>
                    <v-radio label="有电梯" color="green" value="有"></v-radio>
                    <v-radio label="无电梯" color="green" value="无"></v-radio>
                  </v-layout>
                </v-radio-group>
                <v-radio-group v-model="jianzhuleixing" :mandatory="false">
                  <v-layout row wrap>
                    <v-radio label="板楼" color="green" value="板楼"></v-radio>
                    <v-radio label="塔楼" color="green" value="塔楼"></v-radio>
                  </v-layout>
                </v-radio-group>
              </v-layout>
              <v-select color="green" autocomplete :items="['毛坯','简装','精装','其他']" label="装修情况" v-model="zhuangxiuqingkuang"></v-select>
              <v-layout row wrap>
                <v-select color="green" autocomplete :items="['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']" label="室" v-model="shi"></v-select>
                <v-select color="green" autocomplete :items="['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']" label="厅" v-model="ting"></v-select>
                <v-select color="green" autocomplete :items="['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']" label="厨" v-model="chu"></v-select>
                <v-select color="green" autocomplete :items="['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']" label="卫" v-model="wei"></v-select>
              </v-layout>
              
              <v-layout row wrap>
              <v-select color="green" autocomplete :items="['1980','1981','1982','1983','1984','1985','1986','1987','1988','1989',
                                '1990','1991','1992','1993','1994','1995','1996','1997','1998','1999',
                                '2000','2001','2002','2003','2004','2005','2006','2007','2008','2009',
                                '2010','2011','2012','2013','2014','2015','2016','2017','2018']" label="建成年代" v-model="jianchengniandai">
              </v-select>
                <v-select color="green" autocomplete :items="['钢混结构','砖混结构']" label="建筑结构" v-model="jianzhujiegou"></v-select>
              </v-layout>
              <v-layout row wrap>
                <v-select color="green" autocomplete :items="['普通住宅','别墅']" label="住房属性" v-model="chanquanshuxing"></v-select>
                <v-select color="green" autocomplete :items="['东','南','西','北','东南','东北','西南','西北','暂无数据']" label="朝向" v-model="chaoxiang"></v-select>
              </v-layout>
              <v-layout row wrap>
                <v-select color="green" autocomplete :items="loucengList" label="楼层" v-model="louceng"></v-select>
                <v-select color="green" autocomplete :items="zongloucengList" label="总楼层" v-model="zonglouceng"></v-select>
              </v-layout>
              <v-text-field label="面积(单位：㎡)" color="green" v-model="mianji"></v-text-field>
              <v-layout row wrap>
                <v-select color="green" autocomplete :items="['0','1','2','3','4','5','6']" label="梯" v-model="ti"></v-select>
                <v-select color="green" autocomplete :items="['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']" label="户" v-model="hu"></v-select>
              </v-layout>
              <v-btn block color="success" @click="estimate()" :loading="estimating">开始预估</v-btn>
            </div>
        </v-card>
      </v-flex>
      <v-flex xs12 md6 lg6 class="pa-1">
        <v-card class="mb-2" v-if="resultShow">
          <v-card-title>
              <h3 class="headline">预测结果</h3>
          </v-card-title>
          <v-card-title>
            <h3 class="headline">你的房子价值:{{price}} 元/㎡</h3>
          </v-card-title>
          <v-card-title>
            <h3 class="headline">总计:{{totlePrice}}万元/㎡</h3>
          </v-card-title>
        </v-card>

        <v-card>
          <div class="pa-2">
            <div id="l-map" class="l-map"></div>
          </div>
        </v-card>
        
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>{{dialogmsg}}</v-card-title>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green" flat @click.stop="dialog=false">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialog: false,
      dialogmsg: '',
      resultShow: false,
      map: '',
      points: [
        {"lng":116.418261,"lat":39.921984,"price":50}
      ],
      ac: '',
      address: '',
      estimating: false,
      dianti: '有',
      jianzhuleixing:'板楼',
      zhuangxiuqingkuang: '', 
      shi: '',
      ting: '', 
      chu: '', 
      wei: '', 
      jianchengniandai: '', 
      jianzhujiegou: '',
      chanquanshuxing: '', 
      chaoxiang: '', 
      louceng: '', 
      mianji: '',
      ti: '',
      hu: '',
      myValue: '',
      zonglouceng: '',
      price: '',
      totlePrice: ''
    }
  },
  methods: {
    estimate () {
      if (!this.check()) {
        this.dialog = true
        this.dialogmsg = '所有空都要填哦'
        return;
      }
      let tvm = this      
      this.estimating = true
      this.axios.post('/api/estimate',{
        address: tvm.address,
        dianti: [tvm.dianti],
        jianzhuleixing:[tvm.jianzhuleixing],
        zhuangxiuqingkuang: [tvm.zhuangxiuqingkuang], 
        shi: [parseInt(tvm.shi)],
        ting: [parseInt(tvm.ting)], 
        chu: [parseInt(tvm.chu)], 
        wei:  [parseInt(tvm.wei)], 
        jianchengniandai:  [parseInt(tvm.jianchengniandai)], 
        jianzhujiegou: [tvm.jianzhujiegou],
        chanquanshuxing: [tvm.chanquanshuxing], 
        chaoxiang: [tvm.chaoxiang], 
        louceng: [parseInt(tvm.zonglouceng)], 
        mianji: [parseFloat(tvm.mianji)],
        tihubili: [tvm.tihubili],
        height: tvm.height
      })
      .then(function (response) {
        tvm.estimating = false
        if (response.data.success) {
          tvm.price = response.data.price;
          tvm.totlePrice = parseInt(tvm.price * parseFloat(tvm.mianji)/10000)
          tvm.dialogmsg = '您的住房价值' + tvm.price +'元/㎡, 总计' + tvm.totlePrice + '万元, 本结果仅供参考'
          tvm.dialog = true
          tvm.resultShow = true
        } else {
          tvm.dialogmsg = '服务器繁忙, 请稍后重试'
          tvm.dialog = true
        }
        console.log(response.data);
      })
      .catch(function (err) {
        console.log(err)
      })
      
    },
    check () {
      let tvm = this
      if (
        tvm.address==''||tvm.address==null||
        tvm.zhuangxiuqingkuang== '' || tvm.zhuangxiuqingkuang== null|| 
        tvm.shi== '' || tvm.shi== null ||
        tvm.ting == '' || tvm.ting ==null || 
        tvm.chu == '' || tvm.chu == null ||
        tvm.wei == '' || tvm.wei == null ||
        tvm.jianchengniandai== '' || tvm.jianchengniandai == null ||
        tvm.jianzhujiegou== '' || tvm.jianzhujiegou == null ||
        tvm.chanquanshuxing== '' || tvm.chanquanshuxing == null || 
        tvm.chaoxiang== '' || tvm.chaoxiang == null || 
        tvm.louceng== '' || tvm.louceng == null || 
        tvm.mianji== '' || tvm.mianji == null ||
        tvm.ti== '' || tvm.ti == null ||
        tvm.hu== '' || tvm.hu == null
      ) {
        return false;
      } else {
        return true;
      }
    }
  },
  computed: {
    tihubili () {
      if (this.ti.length > 0 && this.hu.length > 0) {
        return parseFloat(this.ti) / parseFloat(this.hu)
      } else {
        return 3
      }
    },
    height () {
      if (3 * parseInt(this.louceng) < parseInt(this.zonglouceng)) {
        return '低'
      } else if (parseInt(this.louceng) < parseInt(this.zonglouceng)) {
        return '高'
      } else {
        return '中'
      }
    },
    loucengList () {
      let tmp = [];
      for (let i=1; i<=40; i++){
        tmp.push(i.toString())
      }
      return tmp;
    },
    zongloucengList () {
      let tmp = [];
      let t = 1
      if (!(this.louceng == null || this.louceng == '')) {
        t = parseInt(this.louceng)
      }
      for (let i=t; i<=40; i++){
        tmp.push(i.toString())
      }
      return tmp;
    }
  },
  watch: {
    address(curVal,oldVal){
      this.address = curVal
    },
  },
  mounted () {
    function G(id) {
		return document.getElementById(id);
	  }
    let tvm = this
    this.map = new BMap.Map('l-map')
    this.map.centerAndZoom(new BMap.Point(121.48789948569473, 31.24916171001514), 11);
    //this.map.enableScrollWheelZoom()
    this.ac = new BMap.Autocomplete(    //建立一个自动完成的对象
      {"input" : "suggestId"
      ,"location" : tvm.map
    });
    this.ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
      var _value = e.fromitem.value;
      var value = "";
      if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
      }    
      str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
      
      value = "";
      if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
      }    
      str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
     
    });
    tvm.ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    console.log(_value)
      tvm.myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
      tvm.address = tvm.myValue
      // G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + tvm.myValue;
      
      setPlace();
    });

    function setPlace(){
      tvm.map.clearOverlays();    //清除地图上所有覆盖物
      function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        tvm.map.centerAndZoom(pp, 18);
        tvm.map.addOverlay(new BMap.Marker(pp));    //添加标注
      }
      var local = new BMap.LocalSearch(tvm.map, { //智能搜索
        onSearchComplete: myFun
      });
      local.search(tvm.myValue);
    }
    
  }
}
</script>

<style>
.l-map{
    width:  100%;
  height:  500px;
  overflow:  hidden;
  margin:  0;
  font-family:  "微软雅黑";
}
</style>
